<template>
    <div o-Container>
        <el-upload ref="upload" class="upload-demo" action="#" :accept="DefaultType" :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove" :before-upload="beforeAvatarUpload" multiple :limit="num" :on-exceed="handleExceed" :http-request="httpRequest"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传{{DefaultType}}文件，且不超过{{size}}kb</div> -->
        </el-upload>
    </div>
</template>
<script>
export default {
  name: "img_update", /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      // 主图
      fileList: [],
    }
  },
  props: {
    DefaultType: {
      type: String,
      default: '.jpg,.jpeg,.png,.gif,.svg'
    },
    num: {
      type: Number,
      default: 1,
    },
    octopus: {
      type: Object,
      default: {},
    },
    list: {
      type: Array,
      default: [],
    },
    // 是否允许多选文件
    multiple: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    size:{
        type:Number,
        default:512
    }
  },
  watch: {
    list: {
      handler(v) {
        v && (this.fileList = v)
      },
      deep: true,
      immediate: true,
    }
  },
  methods: {
    beforeAvatarUpload(file) {

      let ispass
      if(this.DefaultType == '.mp4'){
        ispass = file.type == 'video/mp4'
      }
      if(this.DefaultType == '.mp3'){
        ispass = file.type == 'audio/mpeg'
      }
      const isJPEG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isGIF = file.type === 'image/gif';
      const isSVG = file.type === 'image/svg+xml';
      const isLt2M = file.size / 1024 < this.size;
      if (!ispass) {
        this.$message.error('文件上传格式不正确!');
        return false
      } else if (!isLt2M) {
        this.$message.error('文件上传大小超出限制!');
        return false
      }
      return true
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
      this.$emit('FileList', this.fileList);
    },
    handlePictureCardPreview(file) {

      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleExceed(files, fileList) {
      this.$message.error('最多只能上传 ' + this.num + ' 个文件')
    },
    httpRequest({ file }) {
      let o = this
      this.octopus.request.api.upload(file,
        function () {

        },
        function (fileData) {
          if (fileData.status.code == 200) {
            // 清空上传组件的文件列表
            o.$refs.upload.clearFiles()
           
            // 删除旧的本地文件数据
            // o.fileList = o.fileList.filter(item => item.raw !== file)
            // 添加上传后的文件数据到 fileList
            o.fileList.push({ url: o.octopus.config.url + fileData.content.url, name: fileData.content.name, status: 'success' })
            
            o.$emit('FileList', o.fileList)
          }
        });
    },

    uploaderChange(file, fileList, callback) {
      this.fileList = fileList
    },
  },
}
</script>
<style scoped>
>>>.el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #F87338;
    border-radius: 1rem;
    box-sizing: border-box;
    width: 12rem;
    height: 12rem;
    line-height: 12.5rem;
    vertical-align: top;
}

>>>.el-upload--picture-card i {
    font-size: 3rem;
    color: #F87338;
}

>>>.el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #F87338;
    border-radius: 1rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 12rem;
    height: 12rem;
    margin: 0 1rem 1rem 0;
    display: inline-block;
}

>>>.el-upload-list__item {
    transition: none !important;
}

.center-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
</style>